<template>
  <div class="home-swiper-wrapper">
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(item, index) in slideList" :key="index">
        <a :href="item.link">
          <img :src="item.img" />
        </a>
      </swiper-slide>
      <!-- 如果需要分页器 slot插槽 会自动往里面渲染分页器-->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  name: "HomeSwiper",
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    slideList: {
      type:Array,
      default:[]
      }
  },
  data() {
    return {
      swiperOptions: {
        // 自动播放
        autoplay: {
          // 自动切换间隔
          delay: 3000
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        // 环路播放
        loop: true,
        // 切换效果
        effect: "coverflow",
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          // clickable设置为true时，点击分页器的指示点分页器会控制Swiper切换
          clickable: true,
          // 设置小圆点大小不同
          dynamicBullets: true,
        },
      },
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
/* 轮播图 */
.home-swiper-wrapper{
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.home-swiper-wrapper > .swiper-container {
  width: 100vw;
}
.home-swiper-wrapper img {
  width: 100%;
  vertical-align: middle;
}
</style>